<template>
<div class="page">
  <messageComfirm @leftCallBack="modalVisible=false" @rightCallBack="sendEmail" :visible="modalVisible">
    <div class="send-email">
      <div class="title">请填写接收数据信息的邮件</div>
      <input type="email" placeholder="系统将以邮件形式发送全部数据" v-model="email"/>
    </div>
  </messageComfirm>
	<filtrate ref="filtrate" :roleInfo="roleInfo" :filtrateParams="params" @cosume="cosume"/>
	<div class="scroll-view">
		<customHeader middleTitle="核销记录" rightTitle="筛选" @rightCallBack="$refs.filtrate.popupShow()"/>
		<searchBar @search="searchCallbck" placeholder="请输入券名称/券码"/>
		<div class="page-body record">
			<div class="record-date">
				{{moment(params.startDate).format('YYYY-MM-DD HH:mm')}} 至 {{moment(params.endDate).format('YYYY-MM-DD HH:mm')}}
			</div>
			<div class="record-survey">
				<div class="record-survey_title">整体概况</div>
				<div class="record-survey_list">
					<div><p>带来收入(元)</p>{{summary.incomeAmt}}</div>
					<!-- <div><p>发放量</p>{{summary.sendNumber}}</div> -->
					<div><p>核销量</p>{{summary.verifyNumber}}</div>
				</div>
			</div>
			<div class="record-title">
				<span>核销明细</span>
			</div>
			<ul class="record-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="30">
				<li v-for="(item,index) in list" :key="index">
					<!-- <div class="record-list_tag">{{['满减券','消费赠券','拉新券','引流券'][item.activityType-1]}}</div> -->
					<div class="record-list_l" v-html="formatDiscount(item)"></div>
					<div class="record-list_r">
						<p class="f32"><strong>{{item.voucherName}}</strong></p>
						<p>券码: {{item.verifyCodes}}</p>
            <div class="f-c">
              <p>时间：{{moment(item.createTime).format('YYYY-MM-DD HH:mm')}}</p>
              <p class="record-list_refund" v-if="item.status==2">已退回</p>
            </div>
					</div>
				</li>
			</ul>
			<div v-show="noMore&&!hasError" class="no-more">已经全部加载完毕</div>
			<noData msg="暂无数据" v-if="hasError" />
		</div>
		<mt-button class="w100" type="primary" @click.native="modalVisible=true">记录详情发送至邮箱</mt-button>
	</div>
</div>
</template>

<script>
import moment from "moment";
import {Toast, MessageBox} from "mint-ui";
import searchBar from "@/components/searchBar/searchBar";
import customHeader from "@/components/header/header";
import messageComfirm from "@/components/messageComfirm/messageComfirm";
import noData from "@/components/noData/noData";
import filtrate from "./filtrate";

export default {
	components: {
    customHeader,
    messageComfirm,
		searchBar,
		noData,
		filtrate
  },
  data() {
		return {
      moment: moment,
      roleInfo: {},
			searchKey: '',
      pageNo: 1,
      store: [],
			params: {
				startDate: moment().startOf('day').valueOf(),
				endDate: moment().endOf('day').valueOf(),
				store: [],
				coupon: [],
        casher: '',
        isAllStore: true
			},
			noMore: false,
      loading: false,
      list: [],
      summary: {},
      hasError: false,
      email: '',
      modalVisible: false
		}
	},
	methods: {
		cosume(params) {
			this.params = params;
			this.pageNo = 1;
			this.list = [];
			this.getData();
		},
    formatDiscount(item) {
      let num = item.activityType==1 ? item.facePrice : item.discount;
      let arr = (''+num).split('.');
      let html = arr.length==1 ? `<strong>${arr[0]}</strong>` : `<strong>${arr[0]}</strong>.${arr[1]}`;
      return item.activityType==1 ? `<span>¥</span>${html}` : html+'<span>折</span>';
    },
		searchCallbck(v) {
      this.searchKey = v;
      this.pageNo = 1;
      this.list = [];
      this.getData();
		},
    loadMore() {
      if(!this.isInit || this.loading || this.noMore) {
        return;
      }
      this.getData();
    },
    getParams() {
      let params = {
        ticketOrCode: this.searchKey,
        pageNo: this.pageNo,
        pageSize: 10,
        startTime: this.params.startDate,
        endTime: this.params.endDate,
        shopIdList: this.params.store,
        accountId: this.params.casher
      }
      if(params.shopIdList.length) {
        let shopId = [];
        params.shopIdList.forEach(item=>{
          shopId.push(item.selectKey)
        })
        params.shopIdList = shopId;
      }else {
        params.shopIdList = this.store;
      }
      if(this.params.coupon.length) {
        let activityType = [];
        this.params.coupon.forEach(item=>{
          activityType.push(item.value)
        })
        params.marketActivityTypes = activityType;
      }else {
        params.marketActivityTypes = [1,2,3,4]
      }
      return params;
    },
		getData() {
      this.loading = true;
      this.ajax({
        url: 'newapp/activityVoucherVerify/queryRecordPageData.do',
				type: "post",
				data: this.getParams(),
        controlLoading: !this.list.length
      }).then(res=> {
				this.loading = false;
				if(res.success) {
          let data = res.resultObject.pagelist;
          this.summary = res.resultObject.supplierActivityVoucherVerifyRecordSummaryModel;
					this.list = this.list.concat(data.dataList || []);
					if(data.totalCount) {
            this.noMore = data.dataList.length < 10 ? true : false;
          }else {
            this.noMore = true;
          }
          this.pageNo++;
          this.hasError = !this.list.length;
				}else {
          this.noMore = true;
          Toast(res.msg||'服务错误');
        }
        this.hasError = !this.list.length;
        this.isInit = true;
			}).catch(err => {
        this.isInit = true;
				this.loading = false;
				this.noMore = true;
        this.hasError = !this.list.length;
			});
		},
    sendEmail() {
      this.toastInstance && this.toastInstance.close();
      if(!this.email) {
        this.toastInstance = Toast('请输入邮箱地址');
        return;
      }else if(!CommonUtil.checkEmail(this.email)) {
        this.toastInstance = Toast('请输入正确的邮箱地址');
        return;
      }
      let params = this.getParams();
      params.emailAddress = this.email;
      this.ajax({
        type: "post",
        data: params,
        url: "newapp/activityVoucherVerify/sendMailbox.do",
        controlLoading: true
      }).then(res => {
        if(res.success) {
          this.modalVisible = false;
          this.toastInstance = Toast({
            message: '提交成功',
            iconClass: 'zhk-jywc'
          });
        }else {
          this.toastInstance = Toast(res.msg)
        }
      });
    },
    allShopId(cb) {
      this.ajax({
        url: "/newapp/reconciliation/getAllShop.do",
        type: "get",
        controlLoading: true
      }).then(res => {
        if(res.success) {
          let store = [];
          (res.resultObject||[]).forEach(item=>{
            store.push(item.shopId);
          })
          this.store = store;
          cb && cb();
        }
      });
    }
	},
	created() {
    CommonUtil.getUserInfo(true).then(data=> {
      this.roleInfo = data;
      if(data.manyShopFlag!==undefined && !data.manyShopFlag) {
        this.store = [data.yzShopId];
        this.getData();
      }else {
        this.allShopId(this.getData);
      }
      this.params.selected = {
        value: '',
        text: '不限'
      };
      if(data.role==5 || data.role==6) {
        this.params.casher = data.userId;
        this.params.selected = {
          value: data.userId,
          text: data.userName
        }
      }
    });
	}
}
</script>

<style lang="scss" scoped>
@import "../../style/public";
.f-c {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.record {
	&-date {
		color: #999;
		text-align: center;
		@include remCalc(font-size, 24);
		@include remCalc(padding, 20, 0);
	}
	&-survey {
		background-color: #fff;
		@include remCalc(font-size, 28);
		@include remCalc(margin-bottom, 45);
		&_title {
			@include remCalc(height, 80);
			@include remCalc(line-height, 80);
			@include remCalc(margin-left, 30);
			@include thin-border(false, false);
			&:after {
				top: 100%;
				right: 0;
				width: auto;
				@include remCalc(left, 30);
			}
		}
		&_list {
			display: flex;
			@include remCalc(font-size, 30);
			@include remCalc(padding, 30, 0, 20);
			>div {
				flex: 1;
				text-align: center;
				p {
					color: #999;
					@include remCalc(margin-bottom, 10);
					@include remCalc(font-size, 24);
				}
			}
		}
	}
	&-title {
		color: #333;
		display: flex;
		background-color: #fff;
		align-items: center;
		justify-content: space-between;
		@include remCalc(height, 80);
		@include remCalc(font-size, 28);
		@include remCalc(padding, 0, 30);
	}
	&-list {
		li {
			position: relative;
			background-color: #fff;
			color: #999;
			box-sizing: border-box;
			@include remCalc(font-size, 24);
			@include remCalc(min-height, 166);
			@include remCalc(padding, 30, 30, 20, 0);
			@include thin-border(false, false);
		}
		&_tag {
			position: absolute;
			color: #fff;
			top: 0;
			left: 0;
			background-color: #666;
			@include remCalc(height, 44);
			@include remCalc(line-height, 44);
			@include remCalc(font-size, 24);
			@include remCalc(padding, 0, 20);
			@include remCalc(border-radius, 0, 0, 10, 0);
		}
		&_l {
			float: left;
      text-align: center;
			@include remCalc(width, 160);
			@include remCalc(font-size, 28);
			@include remCalc(padding-top, 20);
		}
		&_r {
			overflow: hidden;
			strong {
				color: #333;
        font-weight: normal;
			}
			p {
				@include remCalc(margin-bottom, 10);
			}
		}
    &_refund {
      color: #EE6A61;
      text-align: center;
      border: 1px solid #EE6A61;
      @include remCalc(font-size, 22);
      @include remCalc(width, 88);
      @include remCalc(height, 28);
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      @include remCalc(top, -3);
    }
	}
}
.send-email {
  @include remCalc(padding, 30, 30, 50);
  text-align: center;
  .title {
    @include remCalc(font-size, 32);
    @include remCalc(padding, 30);
  }
  input {
    @include remCalc(height, 60);
    @include remCalc(padding, 0, 10);
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #ddd;
    -webkit-appearance: none;
  }
}
</style>
<style lang='scss'>
@import "../../style/public";
.record-list_l strong {
	color: #333;
  font-weight: normal;
	@include remCalc(font-size, 70);
}
</style>